<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <!-- 先引入css文件 放到自己css文件的上面 -->
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  </head>
  <body>
   <div class="search-content">
      <div class="local">
        <a href="#" title="标题">
          <img src="images/地标.png" alt="">
          <span style="color: #fff;">佛山市</span>
      </a>
      </div>
      <div class="search">
          <form action="">
              <input type="search" value="搜索">
          </form>
      </div>
      <a href="#" class="login">登录</a>
   </div>
    
      <!-- 头部区域 -->
      
      <!-- go模块 -->
 
    <!-- 就业指导模块 -->
   

      <!-- 旋转木马轮播图模块 -->
    <div class="get_job_focus">
        <!-- Swiper -->
        <div class="swiper-container get_job_fo">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#"><img src="./images/5.jpg" alt="" /></a>
              
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./images/2134.jpg" alt="" /></a>
              
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./images/12.jfif" alt="" /></a>
              
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
       <div class="swiper-pagination"></div>
        
    </div>
    
        <!-- nav部分 -->
    <div class="nav clearfix">
            <a href="https://www.imooc.com/?utm_term=%E6%85%95%E8%AF%BE&utm_campaign=SEM&utm_source=bdppxg" target="blank">
                <img src="upload/视频 (1).png" alt="">
                <span>教学视频</span>
            </a>

            <a href="https://music.163.com/#/search/m/?s=%E5%84%BF%E6%AD%8C&type=1" target="_blank">
                <img src="upload/音乐.png" alt="">
                <span>儿童音乐</span>
            </a>

            <a href="https://re.jd.com/search?keyword=%e5%84%bf%e7%ab%a5%e7%8e%a9%e5%85%b7&keywordid=171555713312&re_dcp=202m0QjIIg==&traffic_source=1004&test=1&enc=utf8&cu=true&utm_source=baidu-search&utm_medium=cpc&utm_campaign=t_262767352_baidusearch&utm_term=171555713312_0_393a4b114bd1482ba4506a9d9f707e20" target="_blank">
                <img src="upload/玩具.png" alt="">
                <span>儿童玩具</span>
            </a>

            <a href="https://search.jd.com/Search?keyword=%e5%8d%81%e5%a4%a7%e5%84%bf%e7%ab%a5%e8%af%bb%e7%89%a9&enc=utf-8&enc=utf8&cu=true&utm_source=baidu-search&utm_medium=cpc&utm_campaign=t_262767352_baidusearch&utm_term=16409889562_0_b6c1e2ea20124e50bcb20120aaf8cc5f" target="_blank">
                <img src="upload/书本 (4).png" alt="">
                <span>启蒙读物</span>
            </a>

            <a href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%AE%8B%E7%96%BE%E4%BA%BA%E7%94%A8%E5%85%B7&clk1=22288ea316b5c12ac7709f1563ca2f0d&upsId=22288ea316b5c12ac7709f1563ca2f0d" target="_blank">
                <img src="upload/轮椅.png" alt="">
                <span>残疾用具</span>
            </a>

            <a href="https://disney.com.hk/" target="_blank">
                <img src="upload/游乐场所.png" alt="">
                <span>儿童游乐场</span>
            </a>

            <a href="">
                <img src="upload/军营.png" alt="">
                <span>夏令营</span>
            </a>

            <a href="">
                <img src="upload/运动.png" alt="">
                <span>儿童运动</span>
            </a>

            <a href="http://bj.xdf.cn/bj_static/sem/xdf_pc/?utm_source=beijing_searchengine_baidu_pc_sousuo&utm_medium=CPC&utm_campaign=beijing_pinpaici_hangyedingtou_waidi_xindongfang-xindongfang&utm_term=tj.xdf.cn&xdf_source_channel_code=e32838de4ef83b73783c4cc304d7846a" target="_blank">
                <img src="upload/_文化艺术业.png" alt="">
                <span>儿童艺术</span>
            </a>

            <a href="https://store.steampowered.com/" target="_blank">
                <img src="upload/游戏.png" alt="">
                <span>启蒙游戏</span>
            </a>

    </div>

    <div class="content study_con">
      <!-- 头部 -->
      <div class="con-hd">
        <h4>
          <span class="icon"><img src="./icons/i2.png" alt="" /></span>
          资讯信息
        </h4>
        <a href="#" class="more">更多>>></a>
      </div>
      <!-- 学习模块轮播图模块 -->
      <div class="study">
        <!-- Swiper -->
        <div class="swiper-container study_fo">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#" class="ad">
                <img src="./images/pic1.png" alt="" />
              </a>
              <h5>儿童英语，你值得拥有</h5>
              <p>176人学习</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/王者.jpg" alt="" />
              <h5>启蒙游戏，荧幕里的导师</h5>
              <p>196人已报名</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/pic2.png" alt="" />
              <h5>启蒙读物，你值得拥有</h5>
              <p>166人学习</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/军事夏令营.jpg" alt="" />
              <h5>小狼夏令营，等你来挑战</h5>
              <p>156人已报名</p>
            </div>

            <div class="swiper-slide">
              <img src="./images/艺术.jpg" alt="" />
              <h5>达芬奇艺术班，黎啊黎啊</h5>
              <p>168人已报名</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/pic1.png" alt="" />
              <h5>启蒙游戏，荧幕里的导师</h5>
              <p>196人已报名</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/pic1.png" alt="" />
              <h5>残疾用具，全场打骨折</h5>
              <p>1500准备购买</p>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <a href="#" class="item">
        <img src="./icons/home.png" alt="" />
        <p>首页</p>
      </a>
      <a href="https://www.taobao.com/" class="item">
        <img src="./icons/电商.png" alt="" />
        <p>合作电商</p>
      </a>
      <a href="#" class="item">
        <img src="./icons/net.png" alt="" />
        <p>更多周边</p>
      </a>
      <a href="#" class="item">
        <img src="./icons/user.png" alt="" />
        <p>我的首页</p>
      </a>
    </footer>
    

   
   
    <script src="./js/flexible.js"></script>
    <!-- 比如引入js文件 -->
    <script src="./js/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        speed:1000,
        autoplay : {
            delay:5000
        },
    });
          // 第二个函数的轮播图
        (function () {
        //  如果有多个轮播图最好修改下 swiper-container
        var swiper = new Swiper(".study_fo", {
          // 我们可以可以看看到的是 2个半
          slidesPerView: 2.2,
          spaceBetween: 20,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          speed:1000,
          autoplay : {
          delay:3000
         },
        });
      })();
    </script>
  </body>
</html>
